/*
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-07 21:09:45
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-11 16:05:01
 * @FilePath: \Webgl-basic\src\6.绘制正三角形.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import {
    initShader,
    createCubeGem,
    createCube
} from '../lib/index'
import {
    mat4
} from 'gl-matrix';
import * as dat from 'dat.gui'
const canvas = document.querySelector('canvas')
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//获取webgl上下文
const gl = canvas.getContext('webgl')
//定义点顶点着色器(字符串)
const vs_shader = /*glsl*/ `
  // 指定浮点数精度为中等精度  
  precision mediump float;//glsl语法每一行后面都要加上分号,每一行后面都要加上分号
  attribute vec3 a_Position;
  attribute vec3 a_Color;
  attribute vec3 a_Normal;
  varying vec3 v_Color;
  varying vec3 v_Normal;
  varying vec3 v_Position; //入射点位置
  uniform mat4 u_ViewMatrix;
  uniform mat4 u_ProjMatrix;
  //glsl语法中,必须有一个入口函数main shaderToy里面叫mainImage cesuim里面可能叫czm_Main
  void main(){
    //gl_Position 是最后输出的坐标值,Vect4是四维向量,具有四个分量,每一个分量都是float
    // gl_Position= vec4(a_Position,1.0);
    gl_Position= u_ProjMatrix *u_ViewMatrix* vec4(a_Position,1.0);
    v_Color= a_Color;
    v_Normal = a_Normal;
    v_Position = a_Position;
  }`
//片元着色器
const fs_shader = /*glsl*/ `
precision mediump float;
varying vec3 v_Color;
varying vec3 v_Normal;
varying vec3 v_Position; //入射点位置
uniform float light_Intensity;//光照强度银子
uniform vec3 u_LightPosition;//定义光源位置
void main(){
    //lightCol 环境光的颜色
    vec3 lightCol = vec3(1.,1.,1.);
    //环境光最终的颜色 = 环境光颜色 * 环境光强度因子
    vec3 ambientLight = lightCol * light_Intensity;

    //计算漫反射光照
    //计算光线的方向向量
    // vec3 lightDirection = u_LightPosition - vec3(0.,0.,0.);
    vec3 lightDirection = u_LightPosition - v_Position;
    //计算漫反射因子 = 光线方向点乘法线
    float diffuseFactor = dot(normalize(lightDirection),normalize(v_Normal));
    //设置漫反射银子必须要大于0
    diffuseFactor = max(diffuseFactor,0.);
    //计算漫反射光照
    vec3 diffuseColor = lightCol * diffuseFactor;
    //计算不完整的冯氏光照模型 = 漫反射光照 + 环境光
    vec3 phoneCol = diffuseColor + ambientLight;
    
    //反射颜色=物体颜色*环境光颜色 
    vec3 col = v_Color * phoneCol;
    //gl_FragColor是最后输出的像素颜色,是一个四维的数据
    gl_FragColor = vec4(col,1.0);            
}`
//编译着色器,生成程序对象  操作手，专门负责javaScript和shader着色器的通讯
const program = initShader(gl, vs_shader, fs_shader)
gl.program = program;


//视点位置
const viewObj = {
    eyeX: 3,
    eyeY: 3,
    eyeZ: 8,
    lookAtX: 0,
    lookAtY: 0,
    lookAtZ: 0,
    fov: 38,
    near: 0.2,
    far: 100,
}


const renderProMatrix = () => {
    const u_ProjMatrix = gl.getUniformLocation(program, 'u_ProjMatrix')
    //创建正射投影矩阵
    let projMatrix = mat4.create();
    // console.log("projMatrix1", projMatrix);
    mat4.identity(projMatrix);
    //使用正射投影矩阵 参数 左右上下近远六个面的距离
    // projMatrix = mat4.orthoNO(projMatrix,-1,1,-1,1,viewObj.near,viewObj.far)
    //使用透视投影矩阵
    projMatrix = mat4.perspectiveNO(projMatrix, viewObj.fov, window.innerWidth / window.innerHeight, viewObj.near, viewObj.far)
    // console.log("projMatrix2", projMatrix);
    gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix);

}
const renderViewMatrix = () => {
    const u_ViewMatrix = gl.getUniformLocation(program, 'u_ViewMatrix')
    //创建视图矩阵
    let viewMatrix = mat4.create();
    // console.log("viewMatrix1", viewMatrix);
    mat4.identity(viewMatrix);
    viewMatrix = mat4.lookAt(viewMatrix, [viewObj.eyeX, viewObj.eyeY, viewObj.eyeZ], [viewObj.lookAtX, viewObj.lookAtY, viewObj.lookAtZ], [0, 1, 0])
    // console.log("viewMatrix2", viewMatrix);
    gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix);
}

//

// const getData = ()=>{
//     // Create a cube
//     //    v6----- v5
//     //   /|      /|
//     //  v1------v0|
//     //  | |     | |
//     //  | |v7---|-|v4
//     //  |/      |/
//     //  v2------v3
//     var vertices = new Float32Array([   // Vertex coordinates
//         1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0,  // v0-v1-v2-v3 front
//         1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0,  // v0-v3-v4-v5 right
//         1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0,  // v0-v5-v6-v1 up
//         -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0,  // v1-v6-v7-v2 left
//         -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,  // v7-v4-v3-v2 down
//         1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0   // v4-v7-v6-v5 back
//     ]);
//     var colors = new Float32Array([     // Colors
//         0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0,  // v0-v1-v2-v3 front(blue)
//         0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4,  // v0-v3-v4-v5 right(green)
//         1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4,  // v0-v5-v6-v1 up(red)
//         1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4,  // v1-v6-v7-v2 left
//         1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0,  // v7-v4-v3-v2 down
//         0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0   // v4-v7-v6-v5 back
//     ]);
//     var indices = new Uint8Array([       // Indices of the vertices
//         0, 1, 2, 0, 2, 3,    // front
//         4, 5, 6, 4, 6, 7,    // right
//         8, 9, 10, 8, 10, 11,    // up
//         12, 13, 14, 12, 14, 15,    // left
//         16, 17, 18, 16, 18, 19,    // down
//         20, 21, 22, 20, 22, 23     // back
//     ]);

//     return {
//         vertices,
//         colors,
//         indices
//     }
// }
// //创建正方体函数
// const createCube = () => {
//     const {vertices,colors,indices} = getData();
//     // // indices = new Uint8Array(indices)
//     // createBuffer(gl, vertices, 'a_Position', {
//     //     size: 3
//     // })
//     // //创建颜色缓冲区
//     // createBuffer(gl, colors, 'a_Color', {
//     //     size: 3
//     // })    
//     // //创建索引缓冲区
//     // let indexBuffer = gl.createBuffer();
//     // //创建绑定索引缓冲区
//     // gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
//     // gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
//     // //开启隐藏面剔除
//     // gl.enable(gl.DEPTH_TEST)
//     // //清除深度缓冲区
//     // gl.clear(gl.DEPTH_BUFFER_BIT)
//     // return indices.length;
//     const config = new Map()
//     config.set("a_Position",vertices,)  
//     config.set("a_Color",colors,) 
//     //  封装正方体的buffer
//     const n = createCubeGem(gl,indices,config,{size:3})
//     return n
// }
const lightObj = {
    intensity:0.2,
    lightPosX:0,
    lightPosY:0,
    lightPosZ:5,
}

//渲染环境光颜色
const renderLight = ()=>{
    const light_Intensity = gl.getUniformLocation(program,'light_Intensity');
    const u_LightPosition = gl.getUniformLocation(program,'u_LightPosition');
    gl.uniform3f(u_LightPosition,lightObj.lightPosX,lightObj.lightPosY,lightObj.lightPosZ);
    gl.uniform1f(light_Intensity,lightObj.intensity);
   
}
const renderView = () => {
    renderProMatrix()
    renderViewMatrix()
    renderLight()
    const n = createCube(gl,[0,0,0],2,2,2);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
}
renderView()
const gui = new dat.GUI();
const projFolder = gui.addFolder('proj');
projFolder.add(viewObj, 'near', -1, 1, 0.01).onChange(renderView)
projFolder.add(viewObj, 'far', -1, 2, 0.01).onChange(renderView)
projFolder.add(viewObj, 'fov', 0, 90, 0.1).onChange(renderView)


const eyeFolder = gui.addFolder('eyePosition');
eyeFolder.add(viewObj, 'eyeX', -1, 1, 0.01).onChange(renderView)
eyeFolder.add(viewObj, 'eyeY', -1, 1, 0.01).onChange(renderView)
eyeFolder.add(viewObj, 'eyeZ', -1, 5, 0.01).onChange(renderView)

const lookAtFolder = gui.addFolder('lookPostion');
lookAtFolder.add(viewObj, 'lookAtX', 0, 1, 0.01).onChange(renderView)
lookAtFolder.add(viewObj, 'lookAtY', 0, 1, 0.01).onChange(renderView)
lookAtFolder.add(viewObj, 'lookAtZ', 0, 1, 0.01).onChange(renderView)

const ambientLightFolder = gui.addFolder('光强度');
ambientLightFolder.add(lightObj,'intensity',0,5,0.1).onChange(renderView)
ambientLightFolder.add(lightObj,'lightPosX',-10,10,0.1).onChange(renderView)
ambientLightFolder.add(lightObj,'lightPosY',-10,10,0.1).onChange(renderView)
ambientLightFolder.add(lightObj,'lightPosZ',-10,10,0.1).onChange(renderView)